<template>
  <el-menu
    class="menu-wrapper"
    mode="vertical"
    ref="menu"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#42b983"
    :collapse-transition="false"
    :collapse="$store.state.menu.collapse"
    :default-active="curPath"
    :router="true"
  >
    <!-- 存在二级菜单 -->
    <el-submenu v-for="menu in menus" :key="menu.title" :index="menu.group" v-if="menu.children">
      <template slot="title">
        <i :class="menu.icon"></i>
        <span v-html="menu.title"></span>
      </template>
      <el-menu-item
        v-for="item in menu.children"
        :key="menu.title + item.title"
        :index="item.path"
        :class="item.path == curPath ? 'is-active' : ''"
        :route="item.path"
      >
        <template slot="title">
          <i :class="item.icon"></i>
          <span v-html="item.title"></span>
        </template>
      </el-menu-item>
    </el-submenu>
    <!-- 只有一级菜单 -->
    <el-menu-item
      v-else
      :index="menu.path"
      :class="menu.path == curPath ? 'is-active' : ''"
      :route="menu.path"
    >
      <i :class="menu.icon"></i>
      <span slot="title" v-html="menu.title"></span>
    </el-menu-item>
  </el-menu>
</template>
<script>
export default {
  data () {
    return {

    }
  },
  computed: {
    menus () {
      return this.$store.state.menu.menus
    },
    curPath () {
      return this.$route.path
    },
    curGroup () {
      return (this.$route.path.split('/', 2))[1]
    },
    groups () {
      let arr = []
      for (let item of this.menus) {
        if (item['group']) {
          arr.push(item['group'])
        }
      }
      return arr
    }
  },
  methods: {
    openSubMenu () {
      let route = {
        ...this.$route
      }
      const group = (route.path.split('/', 2))[1]
      if (this.groups.includes(group)) {
        this.$refs['menu'].open(group)
      }
    }
  },
  watch: {
    '$route' (route) {
      this.openSubMenu()
    }
  },
  created () {
    this.$nextTick(() => {
      this.openSubMenu()
    })
  }
}
</script>
<style scoped>
.menu-wrapper{
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    width:100%;
    transition: width 0.5s;
    overflow-x:hidden;
    border-right: 0px;
}
.el-menu-item.is-active{
  color: #42b983!important
}
</style>
